<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3480126_q9hrksv5bq.css">
    </link>
</head>

<body>
    <div class="nav">
        <div class="con">
            <div class="left">
            </div>
            <div class="right">
                <div class="listxx">
                    <ul>
                        <li class="hd">首页</li>
                        <li class="hd">书库</li>
                        <li class="hd getl">排行榜</li>
                        <li class="hd getn">作家专区</li>
                        <li class="hd">作家福利</li>
                    </ul>
                </div>
                <div class="list2">
                    <div class="search">
                        <div class="ipt">
                            <input type="text" placeholder="请输入书名或者作者" id="ipt">
                        </div>
                        <div class="searchList">
                            <button class="sr"><i class="iconfont icon-sousuo"></i></button>
                        </div>
                    </div>
                    <div class="lr">
                        <span class="llrr">登录</span>
                        <span class="s">|</span>
                        <span class="llrr">注册</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="sss">
        <div class="ccn">
            <div class="ddddd">
                <div class="ipt1">
                    <i class="iconfont icon-sousuo"></i>
                    <div class="cff">
                        <input type="text" placeholder="请输入书名或者作者" id="iptss" style="padding-left:50px">
                    </div>
                </div>
                <div class="bn">
                    <button class="btn">搜索</button>
                </div>
            </div>
            <div class="choose">
                <div class="ce">
                    <ul>
                        <li class="lis">相关</li>
                        <li class="lis">最新</li>
                        <li class="lis">最热</li>
                    </ul>
                </div>
                <div class="k">

                </div>
            </div>
        </div>
    </div>
    <div class="a_area">
        <div class="author">
            <div class="res_">
                共<span class="result"></span>项相关的结果
            </div>
            <div class="bt">
                <div class="iim">
                    <img src="" alt="" class="ai">
                </div>
                <div class="at">
                    <div class="it">
                        <div class="tts">
                            <img src="" alt="" class="gs"></img>
                        </div>
                        <div class="na">
                            <p class="ns"></p>
                        </div>
                    </div>
                    <div class="it1">
                        <p class="rf"></p>
                    </div>
                    <div class="it2">
                        <ul>
                            <li class="te">粉丝数8772</li>
                            <li class="te">作品总字数299万</li>
                            <li class="te">创作天数872天</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="container">
            <!-- 排行榜区域 -->
            <div class="content">
                <div class="novelsList">
                    <ul class="list">

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="ff">
            <div class="cont">
                <div class="left">
                    <div class="top">

                    </div>
                    <div class="cc">

                    </div>
                    <div class="ft">
                        <ul>
                            <li>2022 北京时光荏苒科技有限公司</li>
                            <li>京ICP备18018851号-8 |京公网安备 11010802030409号 | 京ICP证 京B2-20200085号 |</li>
                            <li>网络文化经营许可证：京网文[2020]1043-169号</li>
                            <li>请使用者仔细阅读《番茄小说网用户协议》、《番茄小说网隐私政策》说明</li>
                            <li>广告投放：www.oceanengine.com 不良信息举报：fanqiejubao@bytedance.com</li>
                            <li>意见建议邮箱：original_articles@bytedance.com 版权咨询：1748420113@qq.com</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="xcx">
                    <div class="ig">
                        <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/5180eh7pldnuhog/muye-novel-web-pc/dycode.png"
                            alt="">
                    </div>
                    <div class="tx">
                        <p><i class="iconfont icon-douyin"></i> 打开抖音扫码关注官方账号</p>
                    </div>
                </div>
                <div class="code_ma">
                    <div class="m">
                        <img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/5180eh7pldnuhog/muye-novel-web-pc/wechat.png"
                            alt="">
                    </div>
                    <div class="tt">
                        <p><i class="iconfont icon-weixin1"></i> 扫码关注微信公众号</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    let cnt = document.querySelector(".content");

    const getresult = async (res) => {
        let params = {
            name: res,
            author_name: res
        };
        let result = await axios.post("/search", params);
        let data = [...result.data.data];
        console.log(data)
        let length = data.length
        let bt = document.querySelector(".bt");
        let main = document.querySelector('.main');
        main.style.height = length * 205 + 'px'
        if(length === 0) {
            bt.style.display = "none";
            main.style.display = "none";
        }else {
            bt.style.display = "block";
            main.style.display = "block";
        }
        let rl = document.querySelector('.result')
        let ai = document.querySelector('.ai')
        let gs = document.querySelector('.gs')
        let ns = document.querySelector('.ns')
        let rf = document.querySelector('.rf')
        rl.innerHTML = length
        ai.src = data[0].author_avatar
        console.log(data[0].author_avatar)
        gs.src = data[0].tag
        ns.innerHTML = data[0].author_name
        rf.innerHTML = data[0].author_intr
        // 分类数据
        let list = document.querySelector(".list");
        list.innerHTML = ""
        data.map(el => {
            let li = document.createElement("li");
            let d1 = document.createElement("div");
            let d2 = document.createElement("div");
            d2.className = "d2";
            let d3 = document.createElement("div");
            d3.className = "d3";
            let aa = document.createElement("a");
            aa.href = `/public/detail/index.html?${el.id}`
            let img = document.createElement("img");
            img.src = el.img;
            aa.appendChild(img);
            d1.appendChild(aa);
            li.appendChild(d1);
            let p1 = document.createElement("p");
            p1.className = "p1";
            p1.innerHTML = el.name;
            d2.appendChild(p1);
            let info = [el.name, el.state, el.count + "万字"];
            info.map((el) => {
                let sp = document.createElement("span");
                sp.className = "sp";
                sp.innerHTML = el;
                d2.appendChild(sp);
            });
            let p2 = document.createElement("p");
            p2.className = "p2";
            p2.innerHTML = el.summary;
            d2.appendChild(p2);
            let p3 = document.createElement("p");
            p3.className = "p3";
            p3.innerHTML = "最近更新:" + el.lastest_update;
            d2.appendChild(p3);
            li.appendChild(d2);
            let p4 = document.createElement("p");
            p4.className = "p4";
            p4.innerHTML = "书籍详情";
            d3.appendChild(p4);
            li.appendChild(d3);
            list.appendChild(li);
        });
    }
    const result = () => {
        let res = decodeURI(location.href.split("?")[1])
        getresult(res);
        let pt = document.querySelector("#iptss")
        let btn = document.querySelector(".btn")
        btn.addEventListener("click", () => {
            getresult(pt.value)
        })
    }
    result()
    let lis = document.querySelectorAll(".lis")
    let hds = document.querySelectorAll(".hd")
    lis[0].style.borderBottom = "2px solid #ff5000"
    lis[0].style.color = "#ff5000"
    // hds[0].style.borderBottom = "2px solid #ff5000"
    // hds[0].style.color = "#ff5000"
    for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            for (let i = 0; i < lis.length; i++) {
                lis[i].style.color = ""
                lis[i].style.borderBottom = ""
            }
            this.style.color = "#ff5000"
            this.style.borderBottom = "2px solid #ff5000"
        }
    }
    for (let i = 0; i < hds.length; i++) {
        hds[i].onclick = function () {
            for (let i = 0; i < hds.length; i++) {
                hds[i].style.color = ""
                hds[i].style.borderBottom = ""
            }
            this.style.color = "#ff5000"
            this.style.borderBottom = "2px solid #ff5000"
        }
    }
    let getn = document.querySelector('.getn')
    let getl = document.querySelector('.getl')

    getn.addEventListener('click',()=>{
        window.location.href = '/public/author_area/index.html'
    })
    getl.addEventListener('click',()=>{
        window.location.href = '/public/leaderboard/index.html'
    })
</script>

</html>